<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>用户评论管理_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
</head>
<body>
<div style="padding: 20px;">
    <span class="layui-breadcrumb">
        <a>首页</a>
        <a><cite>用户评论管理</cite></a>
    </span>
    <div style="padding-top: 20px;">
        <table width="100%" id="commentListTable" lay-filter="commentListTable"></table>
    </div>
</div>

<script type="text/html" id="toolbarTpl">
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</script>
<script type="text/html" id="toolTpl">
    <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script type="text/html" id="statusSwitchTpl">
    {{#  if(d.status == 1){ }}
    <input type="checkbox" name="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-filter="statusSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;" checked="checked"/>
    {{#  } else { }}
    <input type="checkbox" name="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-filter="statusSwitch" lay-text="&nbsp;是&nbsp;|&nbsp;否&nbsp;"/>
    {{#  } }}
</script>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    let $, layer, table, form;
    layui.use(['layer', 'table', 'form'], function () {
        $ = layui.jquery,
            layer = layui.layer,
            table = layui.table,
            form = layui.form;

        table.render({
            elem: '#commentListTable',
            toolbar: '#toolbarTpl',
            url: '/admin/comment/list',
            limit: 30,
            cols: [[
                {type: 'checkbox'},
                {field: 'content', title: '评论内容'},
                {field: 'res', width: 200, title: '评论资源', templet: formatResName},
                {field: 'createDate', width: 200, title: '评论日期', sort: true, align: 'center'},
                {field: 'user', width: 100, title: '评论用户', templet: formatUsername},
                {field: 'status', width:100, title: '审核状态', align:'center', sort: true, templet: formatStatus},
                {field: 'status', title:'审核通过?', width:100, templet: '#statusSwitchTpl', unresize: true},
                {field: 'action', width: 100, title: '操作', align: 'center', templet: '#toolTpl'}
            ]],
            page: true
        });

        // 触发工具栏事件
        table.on('toolbar(commentListTable)', function (obj) {
            switch (obj.event) {
                case 'delete': // 删除
                    deleteSelected();
                    break;
            }
        });

        // 触发单元格工具事件
        table.on('tool(commentListTable)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'delete': // 删除
                    deleteOne(data.id);
                    break;
            }
        });

        // 监听审核操作
        form.on('switch(statusSwitch)', function (obj) {
            $.post("/admin/comment/updateStatus", {"id": this.name, "status": obj.elem.checked ? 1 : 0}, function (result) {
                if (result.success) {
                    layer.msg("执行成功！");
                    table.reload("commentListTable", {});
                } else {
                    layer.msg("执行失败，请联系管理员！");
                }
            }, "json");
        });
    });

    function formatResName(d) {
        return "<a href='/res/detail/" + d.res.id + "' target='_blank'>" + d.res.name + '</a>';
    }

    function formatUsername(d) {
        return d.user.username;
    }

    function formatStatus(d) {
        if (d.status == 0) {
            return "<label style='color:green'>待审核</label>";
        } else if (d.status == 1) {
            return "<label style='color:blue'>审核通过</label>";
        } else if (d.status == 2) {
            return "<label style='color:red'>审核未通过</label>";
        }
    }

    function deleteOne(id) {
        layer.confirm('您确定要删除这条记录吗？', {
            title: "系统提示",
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll('dialog');
            $.post("/admin/comment/delete", {"id": id}, function (result) {
                if (result.success) {
                    layer.msg("删除成功！");
                    table.reload("commentListTable", {});
                } else {
                    layer.msg("删除失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }

    function deleteSelected() {
        let checkStatus = table.checkStatus('commentListTable');
        if (checkStatus.data.length == 0) {
            layer.msg("请选择要删除的数据！");
            return;
        }
        let strIds = [];
        let rows = checkStatus.data;
        for (var i = 0; i < checkStatus.data.length; i++) {
            strIds.push(rows[i].id);
        }
        var ids = strIds.join(",");
        layer.confirm('您确定要删除这<label style="color: red;">' + checkStatus.data.length + '</label>条记录吗？', {
            title: '系统提示',
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll('dialog');
            $.post("/admin/comment/deleteBatch", {"ids": ids}, function (result) {
                if (result.success) {
                    layer.msg("删除成功！");
                    table.reload("commentListTable", {});
                } else {
                    layer.msg("删除失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }
    /*]]>*/
</script>
</body>
</html>